import { useState, useEffect } from 'react'
import { useAppSelector } from '../../app/hooks'
import http from '../../api'
import { useNavigate } from 'react-router-dom'
import { AroundItem, AroundList } from '../../myTypes'
import style from './aroundShowList.module.css'
import { Swiper, InfiniteScroll, Toast } from 'antd-mobile'
import { minPrice, maxPrice, theme, order, active } from '../../features/around/AroundSlice'
import Loading from '../publicComponents/Loading'

export default function AroundShowList() {
  const navigate = useNavigate()
  let [page, setPage] = useState(1)
  let [dataList, setDataList] = useState<Array<AroundItem>>([])
  const orderBy = useAppSelector(active)
  const descOrAsc = useAppSelector(order)
  const themeIdArr = useAppSelector(theme)
  const priceDown = useAppSelector(minPrice)
  const priceUp = useAppSelector(maxPrice)
  const [hasMore, setHasMore] = useState(true)

  async function loadMore() {
    Toast.show({
      content: '加载中...',
      maskClickable: false,
      duration: 0,
      icon: <Loading />
    })
    const data = await sendRequestGetData()
    if (data) {
      const dataList = data.data as AroundList
      setDataList((preData) => [...preData, ...dataList.list])
      setPage((prePage) => prePage + 1)
      setHasMore(() => dataList.list.length > 0)
    }

    Toast.clear()
  }

  function sendRequestGetData() {
    let orderByValue = ''
    if (orderBy === 'complex') {
      orderByValue = orderBy + 'asc'
    } else {
      orderByValue = orderBy + ' ' + descOrAsc
    }
    return http('post', '/mty/theme/query', {
      priceDown,
      priceUp,
      orderBy: orderByValue,
      pageSize: 5,
      pageNum: page,
      themeIdArr
    })
  }
  useEffect(() => {
    const id = localStorage.getItem('userId')
    if (id) {
      if (page === 1) return
      setPage(() => {
        page = 1
        setDataList(() => {
          dataList = []
          setHasMore(true)
          return dataList
        })

        return 1
      })
    } else {
      navigate('/login')
    }
  }, [orderBy, descOrAsc, themeIdArr, priceDown, priceUp])

  return (
    <div className={style['around-list']}>
      {dataList.map((item) => (
        <div className={style['around-item']} key={item.id}>
          {/* 图片轮播 */}
          <Swiper indicator={() => null}>
            {item.imgList.map((img) => (
              <Swiper.Item key={img.id}>
                <div className={style['swiper-img']}>
                  <img src={img.img} alt="" />
                </div>
              </Swiper.Item>
            ))}
          </Swiper>

          {/* 人均价格和距离 */}
          <div className={style['distance-price']}>
            <div className={style['price-container']}>
              <div className={style.text}>人均消费</div>
              <div className={style.price}>
                <span className={style.icon}>￥</span>
                <span className={style.number}>{item.consumption}</span>
              </div>
            </div>
            <div>
              <span>{item.area}</span>
              <span className={style.spot}>·</span>
              <span>距您{item.distance}km</span>
              <span className={style.spot}>·</span>
              <span>车程{item.duration}分钟</span>
            </div>
          </div>

          {/* 详情介绍 */}
          <div className={style['desc-container']}>
            <div className={style.title}>{item.name}</div>

            {/* tag */}

            <div className={style['tag-list']}>
              {item.tagList.map((tag) => (
                <div className={style['tag-item']} key={tag.id}>
                  {tag.tagName}
                </div>
              ))}
            </div>
            {/* 详细描述 */}
            <div className={style.desc}>{item.introduce}</div>
          </div>

          {/* 店内推荐 */}
          <div className={style.recommend}>
            <div className={style['recommend-title']}>店内推荐</div>
            <div className={style['recommend-list']}>
              {item.goodList.map((g, i) => (
                <div className={style['recommend-item']} key={i}>
                  <div className={style['recommend-pic']}>
                    <img src={g.deImg} alt="" />
                  </div>
                  <div className={style['recommend-detail']}>
                    <div className={style['recommend-item-title']}>{g.name}</div>
                    <div className={style['recommend-item-price-container']}>
                      <div className={style['recommend-price']}>
                        <span className={style['price-icon']}>￥</span>
                        <span className={style['price-number']}>{g.price}</span>
                        <span className={style['price-text']}>起</span>
                      </div>
                      <div className={style['recommend-desc']}>
                        <span>详情</span>
                        <span className={style['desc-icon']}>
                          <img src="/static/use/icon-arrow-right-212.png" alt="" />
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              ))}

              {/* 操作选项 */}
            </div>
            <div className={style['option-list']}>
              <div className={style['option-item']}>
                <div className={style['option-icon']}>
                  <img src="/static/share/icon-share-505.png" alt="" />
                </div>
                <div className={style['option-text']}>分享</div>
              </div>

              <div className={style['option-item']}>
                <div className={style['option-icon']}>
                  <img src="/static/share/icon-home-505.png" alt="" />
                </div>
                <div className={style['option-text']}>进店</div>
              </div>

              <div className={style['option-item']}>
                <div className={style['option-icon']}>
                  <img src="/static/share/icon-star-505.png" alt="" />
                </div>
                <div className={style['option-text']}>收藏</div>
              </div>

              <div className={style['option-item']}>
                <div className={style['option-icon']}>
                  <img src="/static/share/icon-more-64-505.png" alt="" />
                </div>
                <div className={style['option-text']}>更多</div>
              </div>
            </div>
          </div>
        </div>
      ))}
      <InfiniteScroll threshold={10} loadMore={loadMore} hasMore={hasMore}>
        {!hasMore && <span>----我也是有底线的----</span>}
      </InfiniteScroll>
    </div>
  )
}
